<template>
	<view class="topBarContainers" v-if="ishow">
		<view class="topBarContainers_content display_flex">
			<view class="topBarContainers_content_imgContainers">
				<image src="@/static/logo.png" class="topBarContainers_content_img"></image>
			</view>
			<view class="topBarContainers_content_mid">
				<view class="topBarContainers_content_mid_time text_overflow">
					{{tTitleDate}}
				</view>
				<view class="topBarContainers_content_mid_select">
					<xfl-select :list="list" :initValue='initValue' :clearable="false" :showItemNum="5" :isCanInput="false"
						:style_Container="listBoxStyle" :placeholder="'选择演出场次'" @change="change">
					</xfl-select>
				</view>
			</view>
			<view class="topBarContainers_content_right display_flex_bet">
				<view class="topBarContainers_content_right_buyBtn display_flex-center" @tap="goToTocket()" style="cursor: pointer;">  
					<image src="@/static/card.png" class="topBarContainers_content_right_buyBtn_img"></image>
					<view class="topBarContainers_content_right_buyBtn_text">
						购票
					</view>
				</view>
				<view class="topBarContainers_content_right_navBtn" @tap="showTopDailog()" style="cursor: pointer;">
					=
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getItem,
		setItem,
		clearStorage
	} from '@/utils/storage.js'
	import xflSelect from '../xfl-select/xfl-select.vue';
	export default {
		name: 'custom',
		components: {
			xflSelect
		},
		props: {
               position:{
				   type: String,
				   default: ''
			   }
		},
		data() {
			return {
				ishow:false,
				initValue:'',
				listBoxStyle: `height:48rpx; font-size: 24rpx;`,
				list: [],
				planListArr:[],//节目单
				tTitleDate:'',
				weekZn:['周一','周二','周三','周四',"周五",'周六','周日']
			};
		},
		mounted() {

			// #ifdef H5

			// #endif
			this.ishow=false
			this.getgoodList()
		},
		methods: {
			goToTocket(){
			   uni.navigateTo({
			   	url: '/pages/tickets/index'
			   });	
			},
			getgoodList() {
				this.list = []
				this.$http.Post(this.$api.goodList, {
					goodName: ''
				}, (res) => {
					console.log(res)
					let data = res
					
					data.forEach(item => {
						this.list.push({
							id: item.id,
							value: item.name
						})
					})
					if(data&&data.length>0){
						console.log("999")
						if(getItem('customObj')){
							let objData=getItem('customObj')
							this.initValue=this.list[objData.index].value
							this.getplanList(this.list[objData.index].id)
							this.$emit('getContent',this.list[objData.index])
						}else{
							this.initValue=this.list[0].value
							this.getplanList(this.list[0].id)
							this.$emit('getContent',this.list[0])
							let obj={
								index:0,
								...this.list[0]
							}
							setItem('customObj',obj)
						}
						
					}
					this.ishow=true
					
				})
			},
			getplanList(id){//goodId
			     this.planListArr=[]
				 this.tTitleDate=''
				this.$http.Post(this.$api.planList, {
					goodId: id
				}, (res) => {
					console.log(res)
					let data = res
					data.forEach((item,index) => {
					  let day= item.beginDate.split('-')[1]+'.'+item.beginDate.split('-')[2]
					  let dayzn= item.beginDate.split('-')[1]+'月'+item.beginDate.split('-')[2]+'日'
					  let weekDay=item.weekDate.substring(0,3)
					  let weekDayZn=weekDay=='Mon'?this.weekZn[0]:weekDay=='Tue'?this.weekZn[1]:weekDay=='Wed'?this.weekZn[2]:weekDay=='Thu'?this.weekZn[3]:weekDay=='Fri'?this.weekZn[4]:weekDay=='Sat'?this.weekZn[5]:this.weekZn[6]
					  this.planListArr.push({
					  	day: day,
						dayzn:dayzn,
						weekDayZn:weekDayZn,
					  	weekDay:weekDay,
						...item
					  })
					  //let text=day +' '+ weekDay + ((index!=data.length-1)?' / ':'')
					   let text=dayzn +' '+ weekDayZn + ((index!=data.length-1)?' / ':'')
					  console.log(text)
					  this.tTitleDate +=text
					})
					if(this.position=='index'){
						 this.$emit('getPlanListEvent',this.planListArr)
					}
					
				})
			},
			
			showTopDailog() {
				this.$emit('showTopDailog')
			},
			visibleChange(isShow) { // 列表框的显示隐藏事件
				console.log('isShow::', isShow);
			},
			change({
				newVal,
				oldVal,
				index,
				orignItem
			}) {
				console.log(newVal, oldVal, index, orignItem);
				this.getplanList(orignItem.id)
				let obj={
					index:index,
					...orignItem
				}
				setItem('customObj',obj)
				this.$emit('getContent',orignItem)
			}
		}
	};
</script>

<style scoped lang="scss">
	.topBarContainers {
		height: 128rpx;
		width: 100%;
		background-image: url("../../../static/bg_header.jpg");
		background-size: fill;

		&_content {
			&_imgContainers {
				padding: 24rpx;

			}

			&_img {
				width:160rpx;
				height: 80rpx;
				display: block;
			}

			&_mid {
				margin-left:6rpx;
				// padding-top:16rpx;
				width: calc(100% - 480rpx);
				color: #fff;
				cursor: pointer;

				&_time {
					// padding-left:10rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					margin-bottom: 16rpx;
				}
			}

			&_right {
				margin-left: 32rpx;
				width: 268rpx;

				&_buyBtn {
					width: 114rpx;
					height: 52rpx;
					border: 2rpx solid rgba(234, 11, 42, 1);
					color: rgba(234, 11, 42, 1);
					background: #fff;
					border-radius: 48rpx;
                    cursor: pointer;
					&_img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
				}

				&_navBtn {
					width: 80rpx;
					height: 80rpx;
					background: rgba(234, 11, 42, 1);
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					font-size: 48rpx;
					margin-right: 20rpx;
					border-radius: 16rpx;
				}
			}
		}
	}
</style>